<template>
  <div>
    <div class="f-title">
      <el-button type="primary" class="f-save" @click="sendFarentData">
        保存
      </el-button>
    </div>
    <!--使用draggable组件-->
    <div class="itxst">
      <div class="col">
        <div class="title" @click="getArr2">把下面元素组件拖拽到中间区域</div>
        <hr>
<!--        clone:在复制列表A中的单元时，深拷贝一份数据到列表B，而不是直接复制。-->
        <draggable v-model="arr1" :group="groupA" :sort="false"   animation="300" :clone="cloneDefaultField" @start="onStart($event,'A')" @end="onEnd($event,'A')">
          <transition-group :style="style1">
            <div class="item" v-for="item in arr1" :key="item.field_id">{{item.form_title}}</div>
          </transition-group>
        </draggable>
      </div>
      <div  class="col">
        <div class="draggable-placeholder" v-show="newArr2==''">请从左侧列表中选择一个组件, 然后用鼠标拖动组件放置于此处</div>
        <draggable v-model="newArr2" :group="groupB" animation="300" chosenClass="chosenClass" scrollSensitivity="777" @start="onStart($event,'B')" @end="onEnd($event,'B')">
          <transition-group :style="style2">
            <div v-for="(item,index) in newArr2" :key="item.field_id"
                 :style="{'display':'flex','flexDirection':flexDirectionStyle(item.flex_direction),'alignItems':flexDirectionStyle(item.flex_direction)=='row'?'center':''}"
                 :class="index === clickItem_index?'item2-clicke-select':'item2'" @click="clickItem(index)">

              <div :class="item.flex_direction=='row'?'form-title-row':'form-title-column'" v-show="item.form_title!=''">
                <span style="color: #FF0000" v-if="item.form_validate.includes('require')">*</span>{{item.form_title}}
              </div>
<!--              <el-input v-if="item.form_type=='input'" :type="item.input_type"-->
<!--                        :style="{'borderWidth':item.border_width,'borderStyle':item.border_style,-->
<!--                        'borderColor':item.border_color,'borderRadius':item.border_radius,'backgroundColor':item.background_color}"-->
<!--                        :maxLength="item.input_length"-->
<!--                        v-model="item.form_content"-->
<!--                        :placeholder="item.form_place"></el-input>-->
              <input class="y-input" v-if="item.form_type=='input'" :type="item.input_type"
                        :style="{'borderWidth':item.border_width,'borderStyle':item.border_style,
                        'borderColor':item.border_color,'borderRadius':item.border_radius,'backgroundColor':item.background_color}"
                        :maxLength="item.input_length"
                        v-model="item.form_content"
                        :placeholder="item.form_place"></input>
              <el-radio-group v-else-if="item.form_type=='radio'" v-model="item.form_content" :style="{ display: item.flex_direction==='row' ? 'flex' : '', flexWrap: item.flex_direction==='row' ? 'wrap' : '' }">
                <el-radio v-for="(radio_item,radio_index) in item.options" :key="radio_item.id" :label="radio_item.label">{{radio_item.label}}</el-radio>
              </el-radio-group>
<!--              <el-input-->
<!--                        v-else-if="item.form_type=='textarea'"-->
<!--                        :style="{'borderWidth':item.border_width,'borderStyle':item.border_style,-->
<!--                        'borderColor':item.border_color,'borderRadius':item.border_radius,'backgroundColor':item.background_color}"-->
<!--                        type="textarea" :maxLength="item.input_length" v-model="item.form_content" :placeholder="item.form_place"></el-input>-->
              <textarea style="width: 100%;" name="" id=""  rows="2"
                        v-else-if="item.form_type=='textarea'"
                        :style="{'borderWidth':item.border_width,'borderStyle':item.border_style,
                        'borderColor':item.border_color,'borderRadius':item.border_radius,'backgroundColor':item.background_color}"
                        type="textarea" :maxLength="item.input_length" v-model="item.form_content" :placeholder="item.form_place"></textarea>
<!--              <el-input v-else-if="item.form_type=='password'" type="password"-->
<!--                        :style="{'borderWidth':item.border_width,'borderStyle':item.border_style,-->
<!--                        'borderColor':item.border_color,'borderRadius':item.border_radius,'backgroundColor':item.background_color}"-->
<!--                        :maxLength="item.input_length" v-model="item.form_content" :placeholder="item.form_place" show-password></el-input>-->
              <input class="y-input" v-else-if="item.form_type=='password'" type="password"
                        :style="{'borderWidth':item.border_width,'borderStyle':item.border_style,
                        'borderColor':item.border_color,'borderRadius':item.border_radius,'backgroundColor':item.background_color}"
                        :maxLength="item.input_length" v-model="item.form_content" :placeholder="item.form_place" show-password></input>
              <el-checkbox-group v-else-if="item.form_type=='checkbox'" v-model="item.form_content">
                <el-checkbox v-for="(check_item,check_index) in item.options" :key="check_item.id" :label="check_item.label">{{check_item.label}}</el-checkbox>
              </el-checkbox-group>

              <el-select v-else-if="item.form_type=='select'" v-model="item.form_content" :placeholder="item.form_place">
                <el-option
                  v-for="item in item.options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
              <p v-else-if="item.form_type=='title'" style="text-align: center;font-weight: bold">{{item.form_content}}</p>

              <img v-else-if="item.form_type=='image'" :src="item.form_content"  class="form-img">
              <button v-else-if="item.form_type == 'button'"
                      :style="{'borderWidth':item.border_width,'borderStyle':item.border_style,
                        'borderColor':item.border_color,'borderRadius':item.border_radius,'backgroundColor':item.background_color}"
                      class="form-button">{{item.form_content}}</button>

              <el-carousel  v-else-if="item.form_type=='swiper'" :interval="item.interval" :trigger="item.trigger"
                            :direction="item.direction" :initial-index="item.initial_index"
                            :autoplay="item.autoplay" :indicator-position="item.indicator_position">
                <el-carousel-item v-for="item in item.options" :key="item.id">
<!--                  <img :src="item.label" style="height:100%;width: 100%" :alt="item.label">-->
                  <el-image :src="item.label"></el-image>
                </el-carousel-item>
              </el-carousel>

              <tinymce v-else-if="item.form_type == 'editor'" v-model="item.form_content" :height="500" :id="'editor'+item.field_id"/>
              <span v-if="item.flex_direction == 'verify-column' && item.form_type=='verification'" >
                <input class="y-input" style="width: 70%" :type="item.input_type"
                       :style="{'borderWidth':item.border_width,'borderStyle':item.border_style,
                          'borderColor':item.border_color,'borderRadius':item.border_radius,'backgroundColor':item.background_color}"
                       :maxLength="item.input_length"
                       v-model="item.form_content"
                       :placeholder="item.form_place"></input>
                <button style="margin-left: 10px"  @click="countdown(item)">{{item.send_message}}</button>
              </span>
              <input class="y-input" style="width: 70%" v-if="item.flex_direction == 'verify-row' && item.form_type=='verification'" :type="item.input_type"
                     :style="{'borderWidth':item.border_width,'borderStyle':item.border_style,
                          'borderColor':item.border_color,'borderRadius':item.border_radius,'backgroundColor':item.background_color}"
                     :maxLength="item.input_length"
                     v-model="item.form_content"
                     :placeholder="item.form_place"></input>
              <div v-else-if="item.form_type == 'marquee'" :style="{'width':'100%','display':'flex','alignItems':'center','backgroundColor':item.bgcolor,'color':item.color,
					'padding':'5px','fontSize':item.font_size+'px'}">
                <el-image v-show="item.notice_icon_show" :src="item.notice_icon"
                :style="{'width':item.notice_width+'px'}"></el-image>
                <marquee
                  :behavior="item.behavior" :scrollamount="item.scrollamount"
                  :direction="item.direction"
                  :height="item.height"
                  :width="item.width"
                  :style="{'color':item.color}">
                  {{item.form_content}}
                </marquee>
              </div>
              <el-date-picker
                  v-else-if="item.form_type == 'picker'"
                  v-model="item.form_content"
                  :type="item.picker_type"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :placeholder="item.form_place">
               </el-date-picker>
              <baidu-map class="map" :center="{lng:item.mapDetail.lng,lat:Number(item.mapDetail.lat) + 0.006}" :zoom="Number(item.zoom)" :pinch-to-zoom="true" v-else-if="item.form_type == 'map'"
                         style="width: 100%;height: 300px;">
                <bm-marker :position="item.mapDetail"  @click="infoWindowOpen(item)">
                  <bm-info-window :show="item.show===true?true:false" @close="infoWindowClose(item)" @open="infoWindowOpen(item)" style="max-width: 400px;"  :height="0">
                    <div class="">
                      <span style="font-size: 20px">{{item.mapDetail.address1}}</span>
                      <div style="border-bottom:1px solid #000;margin: 15px 0;"></div>
                      <div style="display: flex;align-items: center">
                        <div>
                          <img src="@/assets/map/address.png" style="width: 20px;">
                        </div>
                        <div>
                          {{item.mapDetail.address2}}
                        </div>
                      </div>
                      <div style="display: flex;align-items: center">
                        <div>
                          <img src="@/assets/map/phone.png" style="width: 20px;margin-top: 2px;">
                        </div>
                        <div>
                          {{item.mapDetail.phone}}
                        </div>
                      </div>
                      <div style="display: flex;margin-top: 10px;" >
                        <div>
                          <img src="@/assets/map/navigation.png" style="width: 20px;">
                        </div>
                        <div>
                          立即导航到此
                        </div>
                      </div>
                    </div>
                  </bm-info-window>
                </bm-marker>
              </baidu-map>

              <button style="margin-left: 10px" v-if="item.flex_direction == 'verify-row' && item.form_type=='verification'" @click="countdown(item)">{{item.send_message}}</button>

              <div class="form-operate" v-show="index === clickItem_index?true:false">
                <div class="form-operate-item" @click="deleteFormOperate(index)">
                  <i class="el-icon-delete"></i>
                </div>
              </div>
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
<!--        @tab-click="handleClick"-->
        <el-tabs v-model="activeName" >
          <el-tab-pane label="组件设置" name="first">
            <form-field-component :formDataItem="typeof(newArr2[clickItem_index])==='undefined'?{}:newArr2[clickItem_index]"
            :formData="newArr2"></form-field-component>
          </el-tab-pane>
          <el-tab-pane label="表单设置" name="second">
            <form-set-up-component :formDataItem2="formDataItem2"></form-set-up-component>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
import formFieldComponent from '@/views/draggable/formFieldComponent'
import formSetUpComponent from '@/views/draggable/formSetUpComponent.vue'
// import { getForm,addForm } from "@/api/createForm";
import Tinymce from '@/components/Tinymce'
export default {
  //注册draggable组件
  components: {
    draggable,
    formFieldComponent,
    formSetUpComponent,
    Tinymce
  },
  data() {
    return {
      //arr2:[], //空数组
      newArr2:this.arr2,
      //空数组之在的样式，设置了这个样式才能拖入
      style1:'min-height:430px;display: block;',
      style2:'min-height:777px;display: block;',
      clickItem_index:-1,
      formDataItem2:{
        forms_title:'导航栏标题',
        forms_music_url:'http://music.163.com/song/media/outer/url?id=34341360&thirdfrom=baidualading&market=playlist.mp3',
        forms_start_time:this.getTodayDate('start'),
        forms_end_time:this.getTodayDate('end'),
        forms_submit_ok:0,
        forms_submit_ok_msg:'提交成功',
        forms_submit_fail_msg:'提交失败',
        forms_people:-1,
        forms_is_require:0,
        forms_padding_top:0,
        forms_padding_bottom:20
      },
      activeName: 'first',
      drag:false,
      //只可以拖出
      groupA:{
        name:'site',
        pull:'clone', //可以拖出,移动的为该元素的副本；
        put:false//禁止拖入
      },
      groupB:{
        name:'site',
        pull:true,
        put:true
      },
      //定义要被拖拽对象的数组
      arr1:[
        {
          field_id:1,
          form_title: '文本框',
          form_type:'input',
          input_type:'text',
          input_length:255,
          form_content: '',
          form_place: '请输入',
          options:[],
          form_validate: ['require'],
          flex_direction:'row',
          border_width:'1px',
          border_style:'solid',
          border_color:'#c6c6c6',
          border_radius:'5px',
          background_color:'#ffffff'
        },
        {
          field_id:2,
          form_title: '单选框',
          form_type:'radio',
          form_content: 'null',
          form_place: '',
          options: [
            {
              "id": "1",
              "label": "选项1"
            },
            {
              "id": "2",
              "label": "选项2"
            }
          ],
          form_validate: [],
          flex_direction:'column',
        },
        {
          field_id:3,
          form_title: '多级文本框',
          form_type:'textarea',
          input_length:255,
          form_content: '',
          form_place: '请输入',
          options:[],
          form_validate: [],
          flex_direction:'column',
          border_width:'1px',
          border_style:'solid',
          border_color:'#c6c6c6',
          border_radius:'5px',
          background_color:'#ffffff'
        },
        {
          field_id:4,
          form_title: '密码框',
          form_type:'password',
          input_length:255,
          form_content: '',
          form_place: '请输入',
          options:[],
          form_validate: [],
          flex_direction:'column',
          border_width:'1px',
          border_style:'solid',
          border_color:'#c6c6c6',
          border_radius:'5px',
          background_color:'#ffffff'
        },
        {
          field_id:5,
          form_title: '图片',
          form_type:'image',
          form_content: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          form_place: '',
          options:[],
          form_validate: [],
          flex_direction:'image',
        },
        {
          field_id:6,
          form_title: '按钮',
          form_type:'button',
          form_content: '按钮',
          form_place: '',
          options:[],
          form_validate: [],
          flex_direction:'column',
          width:'100%',
          color:'#ffffff',
          border_width:'1px',
          border_style:'solid',
          border_color:'#c6c6c6',
          border_radius:'5px',
          background_color:'#ff0000'
        },
        // {
        //   field_id:7,
        //   form_title: '标题栏',
        //   form_type:'title',
        //   form_content: '标题栏',
        //   form_place: '',
        //   options:[],
        //   form_validate: [],
        //   flex_direction:'column',
        // },
        {
          field_id:8,
          form_title: '多选框',
          form_type:'checkbox',
          form_content: [],
          form_place: '',
          options: [
            {
              "id": "1",
              "label": "选项1"
            },
            {
              "id": "2",
              "label": "选项2"
            }
          ],
          form_validate: [],
          flex_direction:'column',
        },
        {
          field_id:9,
          form_title: '下拉选择框',
          form_type:'select',
          form_content:'',
          form_place: '请选择',
          options: [
            {
              "id": "1",
              "label": "选项1"
            },
            {
              "id": "2",
              "label": "选项2"
            }
          ],
          form_validate: [],
          flex_direction:'column',
        },
        {
          field_id:10,
          form_title: '富文本编辑器',
          form_type:'editor',
          form_content: '请在此输入内容',
          form_place: '',
          options:[],
          form_validate: [],
        },
        {
          field_id:11,
          form_title: '验证码',
          form_type:'verification',
          input_type:'number',
          bindingMessageId:'',
          input_length:4,
          form_content: '',
          bindingId:'',
          countdown:false,
          interval_time:'null',
          send_status:false,
          input_time:120,
          send_message:'发送验证码',
          form_place: '请输入4位验证码',
          options:[],
          form_validate: ['require','number','verification_code'],
          flex_direction:'verify-column',
          border_width:'1px',
          border_style:'solid',
          border_color:'#c6c6c6',
          border_radius:'5px',
          background_color:'#ffffff'
        },
        {
          field_id:12,
          form_title: '轮播图',
          form_type:'swiper',
          form_content: 'null',
          indicator_position:'default',
          autoplay:true,
          direction:'horizontal',
          circular:true,
          initial_index:0,
          form_height:150,
          interval:3000,
          trigger:'click',
          form_place: '',
          options: [
            {
              "id": "1",
              "label": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            },
            {
              "id": "2",
              "label": "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
            },

          ],
          form_validate: [],
          flex_direction:'swiper',
        },
        {
          field_id:13,
          form_title: '通知栏',
          form_content: '我是滚动弹幕',
          form_type:'marquee',
          notice_icon:'http://blqviewform.yyuebd.com/static/notice.png',
          notice_icon_show:true,
          notice_width:'30',
          behavior:'scroll',//滚动的方式
          direction:'right',//滚动的方向
          scrollamount:'6',
          height:"-1",
          width:"100%",
          bgcolor:"#F56C6D",
          color: '#2979FF',
          font_size:'15',
          form_place: '',
          options:[],
          form_validate: [],
          flex_direction:'marquee',
        },
        {
          field_id:14,
          picker_type:'date',
          form_title: '日期选择器',
          form_type:'picker',
          form_content: '',
          form_place: '选择日期',
          options:[],
          flex_direction:'column',
          form_validate: ['require'],
        },
        {
          field_id:15,
          form_title: '地图',
          form_type:'map',
          form_content: '',
          show:true,
          zoom:15,
          mapDetail:{
            lng: 106.694092,
            lat: 26.57261,
            gcj02_lng:106.688483,
            gcj02_lat:26.56658,
            address1:'花果园湿地公园',
            address2:'彭家湾路交叉口西南200米',
            phone:'18888888888'
          },
          options:[],
          flex_direction:'column',
          form_validate: [''],
        },
      ],
    };
  },

  created() {
    if(Object.keys(this.getFormDataItem2).length != 0){
      this.formDataItem2 = this.getFormDataItem2
    }
  },
  watch:{
    getFormDataItem2(newVal){
      // console.log("触发了")
      this.formDataItem2 = newVal
    }
  },
  props:{
    //类型：修改还是新增
    type:{
      required:true,
      type: String,
    },
    //表单数据
    arr2:{
      type:Array,
      default:[]
    },
    //表单设置
    getFormDataItem2:{
      type:Object,
    },
  },
  methods: {
    //关闭地图标点弹窗
    infoWindowClose (item) {
      // console.log("触发改变false")
      // item.show = false
    },
    //打开地图标点弹窗
    infoWindowOpen (item) {
      item.show = true
    },
    //点击保存，传值给父组件
    sendFarentData(){
      if (this.newArr2.length == 0){
        this.$message.error('您的表单没有设置任何数据')
        return
      }
      console.log(this.newArr2)
      this.formDataItem2['forms_content'] = this.newArr2
      this.newArr2 = []
      this.$emit('draggableVal',{type:this.type,forms:this.formDataItem2})
      this.removeForms()
    },
    //清空，恢复默认
    removeForms(){
      //this.arr2 = []
      this.formDataItem2 = {
        forms_title:'导航栏标题',
        forms_start_time:this.getTodayDate('start'),
        forms_end_time:this.getTodayDate('end'),
        forms_submit_ok:0,
        forms_submit_ok_msg:'提交成功',
        forms_submit_fail_msg:'提交失败',
        forms_people:-1,
        forms_is_require:0,
      }
      this.activeName = 'first'
    },
    getTodayDate(type) {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1; // getMonth()返回的是0-11的值
      let day = date.getDate();

      // 如果月或日的值小于10，前面添加一个'0'
      if (month < 10) month = '0' + month;
      if (day < 10) day = '0' + day;
      if(type == 'start'){
        // 构造返回的字符串
        return `${year}-${month}-${day} 00:00:00`;

      }else{
        // 构造返回的字符串
        year = year + 1
        return `${year}-${month}-${day} 23:59:59`;
      }
    },
    flexDirectionStyle(flexDirection) {
      switch (flexDirection) {
        case 'row':
          return 'row';
        case 'column':
          return 'column';
        // case 'image':
        //   return 'form-item-image';  // assuming you have this class defined somewhere
        case 'swiper':
          return 'column';
        case 'verify-row':
          return 'row';
        case 'verify-column':
          return 'column';
        default:
          return 'form-item-default';  // a default class in case flexDirection is not one of the above
      }
    },
    //倒计时
    countdown(item){
      clearInterval(item.interval_time)
      item.interval_time = setInterval(()=>{
        if(item.input_time==0){
          item.send_status = false
          item.input_time = 2*60
          item.send_message = "重新发送"
          clearInterval(item.interval_time)
          return
        }
        item.send_status = true
        item.input_time --
        item.send_message = "剩余"+item.input_time+"秒";

      },1000)
    },
    //更新
    getArr2(){
      console.log('arr2',this.arr2)
      console.log('formDataItem2',this.formDataItem2)
      // addForm({'content':this.arr2}).then((res)=>{
      //   console.log(res)
      // })
    },
    //点击item时，选中状态
    clickItem(index){
      this.clickItem_index = index
      //赋值给右侧，修改配值
      console.log(this.newArr2)
    },
    //删除组件
    deleteFormOperate(index){
      this.newArr2.splice(index,1)
    },
    update(){
      this.newArr2[0].name = 123456789
    },
    //拖拽副本数据改变
    cloneDefaultField(e){
      let clone_data = JSON.parse(JSON.stringify(e));
      clone_data['field_id'] = new Date().getTime()
      let noTitle = ['图片','按钮','标题栏','富文本编辑器','轮播图','通知栏']
      if(noTitle.includes(clone_data['form_title'])){
        clone_data['form_title'] = ''
      }
      return clone_data;
    },
    //开始拖拽事件
    onStart(e,type){
    },
    //拖拽结束事件
    onEnd(e,type) {
        console.log(this.arr2)
    },
  },
};
</script>
<style>
.tox-tinymce-aux{z-index:99999 !important;}
.tinymce.ui.FloatPanel{z-Index: 99;}
/*定义要拖拽元素的样式*/
.itxst{
  display: flex;
  padding: 20px;
  justify-content: center;
}
.title{
  padding: 6px 12px;
}
.col{
  padding: 10px;
  border: solid 1px #000;
  border-radius:5px ;
  float: left;
}
.col:first-of-type{
  width: 20%;
  max-height: 600px;
}
.col:nth-of-type(2){
  width: 40%;
  max-height: 799px;
  position: relative;
  overflow: scroll;
}
.draggable-placeholder{
  position: absolute;
  top: 300px;
  left: 10%;
  z-index: -999;
  color: #c6c6c6;
  font-size: 2.5rem;
}
.col:last-of-type{
  width: 30%;
  height: 90vh;
  overflow: scroll;
}
.col+.col{
  margin-left: 10px;
}
.chosenClass{
  border: 2px solid #4395FF;
}
.item{
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border:  solid 1px #eee;
  background-color: #f1f1f1;
}
.item:hover{
  background-color: #f1f1f1;
  border: 1px dashed #000000;
  cursor: move;
}
.item+.item{
  margin-top: 6px;
}
.item2{
  padding: 5px;
  border: 1px dashed #000000;
  position: relative;
  margin-bottom: 3px;
}
.item2-clicke-select{
  position: relative;
  padding: 5px;
  border: 1px solid #4395FF;
  margin-bottom: 3px;
}
.item2:hover{
  background-color: #f1f1f1;
  cursor: move;
}
.item2+.item2{
  margin-top: 3px;
}
.form-item{
position: relative;
}
.form-operate{
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 999;
  background-color: #ff0080;
  padding: 5px;
  color: #ffffff;
  display: flex;
  justify-content: space-around;
  cursor: pointer;
}
.form-operate-item{
  padding:0 5px;
}
.form-title-row{
  padding-right: 10px;
  /*background-color: #ff0080;*/
}
.form-title-column{
  margin-bottom: 10px;
  /*background-color: #ff0080;*/
}
.form-img{
  display: block;
  margin: 0 auto;
  width: 100%;
}
.form-button{
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  color: #ffffff;
}
/deep/ .el-radio{
  display: block;
  /*margin-bottom: 10px;*/
}
.el-input{
  flex: 1;
}
.el-radio-group{
  /*display: flex;*/
  /*background-color: #00ff80;*/
}
.y-input{
  padding: 7px 7px;
  width: 90%;
}
</style>
